<template>
<div class="material-box">
  <a v-for="c in materials" :key="c" :style="{backgroundColor: c}" @click="doChange(c)"></a>
</div>
</template>

<script>
export default {
name: "Material",
  props:{
    value:String,
    mode:{type:Number,default:0}
  },
  data(){
    return {
      materials: [
        '#F44336', '#E91E63', '#9C27B0', '#673AB7',
        '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4',
        '#009688', '#4CAF50', '#8BC34A', '#CDDC39',
        '#FFEB3B', '#FFC107', '#FF9800', '#FF5722',
        '#795548', '#9E9E9E', '#607D8B',
      ],
    }
  },
  methods:{

    doChange(c){
      this.$emit("input",c);
      this.$emit("change",c);
    }
  }
}
</script>

<style>
  .material-box{
    width: 100%;
  }
  .material-box:after{
    content: " ";
    display: block;
    clear: both;
  }
  .material-box>a{
    display: block;
    width: 12px;
    height: 12px;
    margin: 6px;
    float: left;
    border-radius: 3px;
    box-shadow: inset 0 0 2px 0px #9E9E9E;
    cursor: pointer;
  }
  .material-box>a:active{
    box-shadow: 2px 2px 0px 0px #9E9E9E;
  }
</style>
